<template>
	<div class="about">
		<el-drawer title="图片管理" :visible.sync="drawer" direction="rtl" :before-close="close_box">
			<div class="main">
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane v-for="(item,index) in img_category" :key="index" :label="item.name" :name="item.name">
						<div class="demo-image">
							<div class="block">
								<el-upload :action="upfile_url" :data="{ cid: cate_id}" :on-success="upimg_back_fun"
									:headers="upfile_head" :limit="9" multiple :show-file-list="false" name="img"
									list-type="picture-card" class="imgs">
									<i class="el-icon-plus"></i>
								</el-upload>

							</div>
							<div class="img_panel">
								<el-image v-for="(items, indexs) in item.img" :key="indexs" @click="choose_img(items)"
									:src="getimg+items.url" class="imgs"></el-image>
							</div>
						</div>
					</el-tab-pane>

				</el-tabs>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import {
		Api_url
	} from '../api/config.js';
	export default {
		data() {
			return {
				img_category: [],
				choose: [],
				activeName: '',
				upfile_url: Api_url + "/cms/image/insert",
				cate_id: 0,
				getimg: Api_url,
				upfile_head: {
					token: localStorage.getItem('token')
				},
			}
		},
		props: {
			drawer: '',
			back_fun: Function,
			send_father: Function
		},

		mounted() {

		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				this.cate_id = this.img_category[tab.index].id
			},
			close_box() {
				this.back_fun(1)
			},
			choose_img(img) {
				this.send_father(img)
			},

			//图片上传回调
			async upimg_back_fun(res) {
				this.$message({
					type: 'success',
					message: '上传成功'
				});
				this.get_img_category()
			},
		}
	}
</script>

<style>
	.about {
		text-align: left;
		padding: 20px;
	}

	.main {
		padding: 30px;
	}

	.imgs {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		margin-top: 30px;
	}

	.img_panel {
		margin-top: 50px;

	}
</style>
